<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
      <el-form-item label="会员宣传">
        <ueditor-wrap v-model="form.userContent" :config="myConfig" @beforeInit="addCustomDialog1"
                      style="width: 90%;"></ueditor-wrap>
      </el-form-item>
      <!--   上传文件   -->
      <el-form-item label="上传">
        <el-upload
          :action="uploadApi"
          :headers="headers"
          :file-list="[]"
          :on-progress="handleProgress"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :data="{type: 3}"
          multiple
        >
          <el-button size="small" type="primary">会员宣传视频上传</el-button>
        </el-upload>
      </el-form-item>
     <video ref="videoPlayer" v-if="form.userViedo !=''" controls :src="form.userViedo" style="width: 20%; height: 20%; object-fit: fill">
     </video>
      <el-form-item label="企业宣传">
        <ueditor-wrap v-model="form.enterpriseContent" :config="myConfig" @beforeInit="addCustomDialog2"
                      style="width: 90%;"></ueditor-wrap>
      </el-form-item>
      <!--   上传文件   -->
      <el-form-item label="上传">
        <el-upload
          :action="uploadApi"
          :headers="headers"
          :file-list="[]"
          :on-progress="handleProgress"
          :before-upload="beforeUpload"
          :on-success="handleSuccess2"
          :data="{type: 3}"
          multiple
        >
          <el-button size="small" type="primary">企业宣传视频上传</el-button>
        </el-upload>
        <video ref="videoPlayer" v-if="form.enterpriseVideo !=''" controls :src="form.enterpriseVideo" style="width: 20%; height: 20%; object-fit: fill">
        </video>
      </el-form-item>
      
      <div ref="editor" class="editor"/>
      <el-button :loading="loading" style="margin-left:1.6%;" size="medium" type="primary" @click="doSubmit">保存
      </el-button>
      <br/>
       <br/>
        <br/>
         <br/>
    </el-form>
  </div>
</template>

<script>
import crudYxIndexIntroduce from '@/api/yxIndexIntroduce'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import MaterialList from "@/components/material"
import {upload} from '@/utils/upload'
import {validEmail} from '@/utils/validate'
import {mapGetters} from 'vuex'
import UeditorWrap from 'vue-ueditor-wrap'
import { getToken } from '@/utils/auth'
import crudFile from '@/api/tools/localStorage'
// crud交由presenter持有
export default {
  name: 'YxIndexIntroduce',
  components: { pagination, crudOperation, rrOperation },
  data() {
    return {
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: ''
      },
      headers: { 'Authorization': getToken() },
      loading: false, form: {id: 1, userContent: '',userViedo:'',enterpriseContent: '',enterpriseVideo:''},
      tos: [{
        value: ''
      }],
      rules: {
        subject: [
          {required: true, message: '标题不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  components: {
    UeditorWrap
  },
  computed: {
    ...mapGetters([
      'uploadApi'
    ])
  },
  created() {
    this.form.id = 1;
    this.$nextTick(() => {
      //this.init()
      if(this.form.id){
        crudYxIndexIntroduce.get(this.form.id).then(data => {
          console.log(data.content)
          this.form = data.content[0]
          this.form.imageArr = [data.imageInput]
        })
      }

    })
  },
  methods: {
    // 上传文件
    upload() {
      this.$refs.upload.submit()
    },
    handleProgress(event, file, fileList) {
      console.log(event)
      // let uploadProgress = file.percentage.toFixed(0)
      // this.uploadProgress = uploadProgress
    },
    beforeUpload(file) {
      let isLt2M = true
      isLt2M = file.size / 1024 / 1024 < 100
      if (!isLt2M) {
        this.loading = false
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      this.form.name = file.name
      return isLt2M
    },
    handleSuccess(response, file, fileList) {
      this.form.userViedo = response.link
    },
    handleSuccess2(response, file, fileList) {
      this.form.enterpriseVideo = response.link
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
      this.loading = false
    },
    addCustomDialog1 () {
      window.UE.registerUI('yshop', function (editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/yshop/materia/index',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;

        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function () {
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      }, 37);
    },
    addCustomDialog2 () {
      window.UE.registerUI('yshop', function (editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/yshop/materia/index',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;

        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function () {
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      }, 37);
    },
    doSubmit() {
      const _this = this
      this.$refs['form'].validate((valid) => {

        this.form.tos = []
        if (valid) {
          let sub = false
          if (sub) {
            return false
          }
          this.loading = true
          crudYxIndexIntroduce.edit(this.form).then(res => {
            this.$notify({
              title: '修改成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.editor {
  text-align: left;
  margin: 20px;
  width: 730px;
}

::v-deep .w-e-text-container {
  height: 360px !important;
}
</style>
